<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<head>
<meta charset="utf-8" />
<title>用户信息列表页面</title>
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<!-- basic styles -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!-- page specific plugin styles -->
<!-- fonts -->
<link rel="stylesheet" href="assets/css/css.css" />
<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
<!-- ace styles -->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="assets/js/ace-extra.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->


<!-- 表单的控件样式 -->
<link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" href="assets/css/chosen.css" />
<link rel="stylesheet" href="assets/css/datepicker.css" />
<link rel="stylesheet" href="assets/css/bootstrap-timepicker.css" />
<link rel="stylesheet" href="assets/css/daterangepicker.css" />
<link rel="stylesheet" href="assets/css/colorpicker.css" />
</head>

<body>
	<!-- 头部 -->
	<div th:replace="after/common/header :: header"></div>
	<!--主体-->
	<div class="main-container" id="main-container">
		<script type="text/javascript">
			try {
				ace.settings.check('main-container', 'fixed')
			} catch (e) {
			}
		</script>
		<div class="main-container-inner">

			<!--******************* Menu 菜单 **********************-->
			<a class="menu-toggler" id="menu-toggler" href="#"> <span
				class="menu-text"></span>
			</a>

			<!--******************* 菜单选项 ******************-->
			<div th:replace="after/common/nav :: navigation" class="sidebar"
				id="sidebar"></div>

			<!-- ******************* 容器 ************** -->
			<div class="main-content">
				<div class="breadcrumbs" id="breadcrumbs">
					<script type="text/javascript">
						try {
							ace.settings.check('breadcrumbs', 'fixed')
						} catch (e) {
						}
					</script>
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> <a href="#">首页</a></li>
					</ul>
					<!-- .breadcrumb -->
					<div class="nav-search" id="nav-search">
						<form class="form-search">
							<span class="input-icon"> <input type="text"
								placeholder="搜索" class="nav-search-input" id="nav-search-input"
								autocomplete="off" /> <i class="icon-search nav-search-icon"></i>
							</span>
						</form>
					</div>
					<!-- #nav-search -->
				</div>

				<div class="page-content">
					<div class="page-header">
						<h1>
							客户基本资料信息 <small> <i class="icon-double-angle-right"></i>
							</small>
						</h1>
					</div>
					<!-- /.page-header -->
					<!-- *******************************  主体部 ****************************** -->
					<div class="row">
						<div class="col-xs-12">
							<form th:action="@{/cutoList}" class="form-search ">
								<div class="row">
									<span class="col-md-3 col-xs-12 col-sm-3"> 用户名称：<input
										type="text" placeholder="请输入" th:name="custName"
										th:value="${customer.custName}" />
									</span> <span class=" col-md-3 col-xs-12 col-sm-3"> 身份证号码：<!-- <input type="text" placeholder="请输入" th:name="custIDcardNo" /> -->
										<!-- <div class="form-group">
															<label for="form-field-select-3">Location</label>

															<div>
																<select class="chosen-select" data-placeholder="Choose a Country...">
																	<option value="">请输入身身份证号</option>
																	<option th:each="cust : ${cust}" th:value="${cust.custIDcardNo}"
												   						th:text="${cust.custIDcardNo}"></option>
																</select>
															</div>
														</div> --> <select th:name="custIDcardNo"
										class="form-inline" id="form-field-select-1"
										th:name="custIDcardNo">
											<option value="">请选择身身份证号</option>
											<option th:each="cust : ${cust}"
												th:value="${cust.custIDcardNo}"
												th:text="${cust.custIDcardNo}"></option>
									</select>
									</span> <span class=" col-md-3 col-xs-12 col-sm-3"> 电话号码：<!-- <input type="text" placeholder="请输入" name="custTele" th:value="${customer.custTele}"/> -->
										<select th:name="custTele" th:value="${customer.custTele}"
										class="form-inline" id="form-field-select-1">
											<option value="">请输入手机号码</option>
											<option th:each="cu : ${cust}" th:value="${cu.custTele}"
												th:text="${cu.custTele}"></option>
									</select>
									</span>
									<div class=" col-md-3 col-xs-12 col-sm-3"
										style="margin-top: -0.5rem;">
										<button type="submit" class="btn btn-info btn-xs btn-app">
											查询</button>
										<button type="reset" class="btn btn-info btn-xs btn-app">
											重置</button>
									</div>
								</div>
							</form>
						</div>
					</div>
					<!-- /.row -->
					<div class="hr hr-18 dotted hr-double"></div>
					<div class="row">
						<div class="col-xs-12">
							<div class="row">
								<div
									class="col-xs-12 tile-body transparent-white rounded-corners">
									<div class="table-responsive">
										<table id="sample-table-1"
											class="table table-striped table-datatable table-bordered table-hover">
											<thead class="alert alert-info">
												<tr>
													<th class="center"><label> <input
															type="checkbox" class="ace" /> <span class="lbl"></span>
													</label></th>
													<th class=""><i
														class="icon-user orange bigger-110 hidden-480"></i>姓名</th>
													<th><i class="icon-time red bigger-110 hidden-480"></i>
														出生年月</th>
													<th class="hidden-480"><i
														class="icon-credit-card orange2 bigger-110 hidden-480"></i>身份证号</th>
													<th><i class="icon-phone bigger-110 hidden-480"></i>手机号码</th>
													<th><i class="icon-home bigger-110 hidden-480"></i>现住址</th>
													<th><i class="icon-home bigger-110 hidden-480"></i>家庭住址</th>
													<th><i class="bigger-110 hidden-480"></i>在职公司（单位）</th>
													<th><i class="bigger-110 hidden-480"></i>婚姻状况</th>
													<th></th>
												</tr>
											</thead>

											<tbody>
												<tr th:if="${custlist.size()} eq 0">
													<td colspan="10" class="red text-center"><strong>未有数据</strong></td>
												</tr>
												<tr th:each="custom : ${custlist}">
													<td class="center"><label> <input
															type="checkbox" class="ace" th:id='chid'
															th:value="${custom.custId}" /> <span class="lbl"></span>
													</label></td>
													<td><a th:href="@{'#'}" th:text="${custom.custName}"
														id="custName"></a></td>
													<td
														th:text="${#dates.format(custom.custBirthAge,'yyyy-MM-dd')}"></td>
													<td id="custIDcardNo" th:text="${custom.custIDcardNo}"></td>
													<td th:text="${custom.custTele}"></td>
													<td th:text="${custom.custHomeaAdress}"></td>
													<td th:text="${custom.custPresentAdress}"></td>
													<td th:text="${custom.custJob}"></td>
													<td th:text="${custom.custMarried}"></td>
													<td>
														<div
															class="visible-md visible-lg hidden-sm hidden-xs btn-group"
															id="userid" th:value="${custom.custId}">
															<button class="btn btn-xs btn-info" data-toggle="modal"
																data-target="#myModal">
																<i class="icon-search bigger-120"></i>
															</button>
														</div>
													</td>
												</tr>
												</tbody>
											</table>
											<div class="modal-footer no-margin-top">
												<ul class="pagination pull-left no-margin">
													<li th:id="pre_getFirstPage"> <a th:href="@{/cutoList(pageIndex=${pageInfo.getFirstPage()})}"> 
														<i class="icon-double-angle-left"></i> 首页 </a>
													</li>
													
													<li th:id="pre_getPrePage"> <a th:href="@{/cutoList(pageIndex=${pageInfo.getPrePage()})}"> 上一页 </a> </li>
													
													<li class="active"> <a href="#" th:id="num" th:text="${pageInfo.getPageNum()}"></a> </li>
													
													<li class="next">
														<a th:href="@{/cutoList(pageIndex=${pageInfo.getNextPage()})}">
															下一页
														</a>
													</li>
													
													<li class="next">
														<a th:href="@{/cutoList(pageIndex=${pageInfo.getLastPage()})}">
															尾页
															<i class="icon-double-angle-right"></i>
														</a>
													</li>
												</ul>
												<div class="col-sm-4">
													<div class="dataTables_info text-center" id="sample-table-2_info">
														<form th:action="@{/cutoList}">
															每页显示<label class="red" th:text="${pageInfo.getPageSize()}"></label>条，
															共<label class="red" th:text="${pageInfo.getPages()}"></label>页，
															到第<input type="text" class="" name="pageIndex" style="width: 3rem;">页 
															<input type="submit" class="btn btn-xs btn-info" value="跳转">
														</form>
										
											<!--************************************************** Modal动态模态框 **************************************************-->
											<div class="modal fade bs-example-modal-lg text-content"
												id="myModal" tabindex="-1" role="dialog"
												aria-labelledby="myModalLabel">
												<div class="modal-dialog modal-lg text-content"
													role="document">
													<div class="modal-content row">
														<div class="modal-header col-md-12">

															<button type="button" class="close text-right"
																data-dismiss="modal" aria-label="Close">
																<span aria-hidden="true">&times;</span>
															</button>
															<h4 class="modal-title text-left" id="myModalLabel">客户基本信息详情</h4>
														</div>
														<div class="modal-body col-md-12 text-left">

															<div class="col-md-6 ">
																姓名:<input type="text" id="custName">
															</div>
															<div class="col-md-6 ">
																性别：<label id="custSex"></label>
															</div>
															<div class="col-md-6 ">
																出生年月：<label id="custBirthAge"></label>
															</div>
															<div class="col-md-6 ">
																身份证号:<label id="custIDcardNo"></label>
															</div>
															<div class="col-md-6 ">
																手机号码:<label id="custTele"></label>
															</div>

															<div class="col-md-6 ">
																职位--工作岗位:<label id="custJob"></label>
															</div>
															<div class="col-md-6 ">
																在职公司： <label id="custJobCompany"></label>
															</div>
															<div class="col-md-6 ">
																公司电话: <label id="custCompContTele"></label>
															</div>
															<div class="col-md-6 ">
																月收入: <label id="custSteadyWages"></label>
															</div>
															<div class="col-md-6 ">
																婚姻状况: <label id="custMarried"></label>
															</div>
															<div class="col-md-6 ">
																配偶姓名: <label id="custMateName"></label>
															</div>
															<div class="col-md-6 ">
																配偶电话: <label id="custMateTele"></label>
															</div>
															<div class="col-md-6 ">
																配偶身份证:<label id="custMateIDcardNo"></label>
															</div>
															<div class="col-md-12 ">
																家庭住址:<label id="custHomeaAdress"></label>
															</div>
															<div class="col-md-12 ">
																现住址：<label id="custPresentAdress"></label>
															</div>
															<div class="modal-footer col-md-12">
																<button class="btn btn-xs btn-success"
																	data-dismiss="modal">
																	<i class="icon-save bigger-125"></i>提交审批
																</button>
																<button class="btn btn-xs btn-danger"
																	data-dismiss="modal">
																	<i class="icon-remove"></i>关闭返回
																</button>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--*********************  更换页面样式和布局 *******************-->
				<div th:replace="after/common/nav :: style"
					class="ace-settings-container" id="ace-settings-container"></div>
			</div>
			<!--**************  Top返回顶部 *****************-->
			<a href="#" id="btn-scroll-up" th:replace="after/common/nav :: top"
				class="btn-scroll-up btn btn-sm btn-inverse"></a>
		</div>
	</div>
	<!--引入脚本    basic scripts -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
		window.jQuery
				|| document
						.write("<script src='assets/js/jquery-2.0.3.min.js'>"
								+ "<"+"script>");
	</script>

	<script type="text/javascript">
		if ("ontouchend" in document)
			document
					.write("<script src='assets/js/jquery.mobile.custom.min.js'>"
							+ "<"+"script>");
	</script>
	<script type="text/javascript"
		th:src="@{assets/js/customerlist/customerlist.js}"></script>

	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/typeahead-bs2.min.js"></script>
	<!-- page specific plugin scripts -->
	<script src="assets/js/excanvas.min.js"></script>
	<script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
	<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="assets/js/jquery.slimscroll.min.js"></script>
	<script src="assets/js/jquery.easy-pie-chart.min.js"></script>
	<script src="assets/js/jquery.sparkline.min.js"></script>
	<script th:src="@{assets/js/flot/jquery.flot.min.js}"></script>
	<script src="assets/js/flot/jquery.flot.pie.min.js"></script>
	<script src="assets/js/flot/jquery.flot.resize.min.js"></script>
	<!-- ace scripts -->
	<script src="assets/js/ace-elements.min.js"></script>
	<script src="assets/js/ace.min.js"></script>


	<!-- inline scripts related to this page -->
	<script src="assets/js/index_public.js" type="text/javascript"></script>
	<!-- page specific plugin scripts -->

	<script src="assets/js/jquery.dataTables.min.js"></script>
	<script src="assets/js/jquery.dataTables.bootstrap.js"></script>

	<script type="text/javascript" th:src="@{assets/js/formControl.js}"></script>

	<!-- inline scripts related to this page -->
	<script type="text/javascript">
		jQuery(function($) {
			var oTable1 = $('#sample-table-2').dataTable({
				"aoColumns" : [ {
					"bSortable" : false
				}, null, null, null, null, null, {
					"bSortable" : false
				} ]
			});

			$('table th input:checkbox').on(
					'click',
					function() {
						var that = this;
						$(this).closest('table').find(
								'tr > td:first-child input:checkbox').each(
								function() {
									this.checked = that.checked;
									$(this).closest('tr').toggleClass(
											'selected');
								});

					});

			$('[data-rel="tooltip"]').tooltip({
				placement : tooltip_placement
			});
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();

				var off2 = $source.offset();
				var w2 = $source.width();

				if (parseInt(off2.left) < parseInt(off1.left)
						+ parseInt(w1 / 2))
					return 'right';
				return 'left';
			}
		})
	</script>
	<script type="text/javascript">
		$(function() {
			//对下拉框进行搜索，获取值
			$(".chosen-select").chosen();
			$('#chosen-multiple-style').on('click', function(e) {
				var target = $(e.target).find('input[type=radio]');
				var which = parseInt(target.val());
				if (which == 2)
					$('#form-field-select-4').addClass('tag-input-style');
				else
					$('#form-field-select-4').removeClass('tag-input-style');
			});
		})
	</script>
</body>
</html>
